<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>NEON LOVE</title>

<link rel="stylesheet" href="css/style.css">

    <style>

        body, html {

    margin: 0;

    padding: 0;

    overflow: hidden;

    width: 100%;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    background-color: black; /* 背景色 */

}


#canvas {

    position: absolute;

    top: 0;

    left: 0;

    z-index: 0;

}

#text-overlay {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    color: #ff69b4; /* 粉色 */

    font-size: 5vw; /* 默认字体大小 */

    font-family: 'Arial', sans-serif;

    text-shadow: 0 0 10px rgba(255, 105, 180, 0.8), 0 0 20px rgba(255, 105, 180, 0.6), 0 0 30px rgba(255, 105, 180, 0.4);

    z-index: 1;

    white-space: nowrap; /* 防止文字换行 */

    text-align: center;

}

#canvas{

    width: 1400;

    height: 600;

}

@media (max-width: 768px) {

    #text-overlay {

        font-size: 8vw; /* 小屏设备上的字体大小 */

    }

    #canvas{

        width: 800;

        height: 600;

    }

}

@media (max-width: 480px) {

    #text-overlay {

        font-size: 12vw; /* 更小屏设备上的字体大小 */

    }

    #canvas{

        width: 800;

        height: 600;

    }

}
</style>

</head>

<body>

<canvas id="canvas"></canvas>

    <!-- <div id="text-overlay">NEON LOVE</div> -->

    <div id="text-overlay">LOVE嘉慧</div>

 <script src="js/script.js"></script>

</body>

</html>